The foreach binding is one of the most commonly used features in Knockout.js — it lets you dynamically render lists of items, and keeps the DOM in sync as the list changes. Let’s break it down nice and easy foreach is a Knockout.js binding that:Loops through an observable arrayRepeats an HTML template for each item Automatically updates the DOM when the array changes (add/remove/update) Basic Example ViewModel: function ViewModel() { this.fruits = ko.observableArray(["Apple", "Banana", "Cherry"]); } ko.applyBindings(new ViewModel()); HTML: andlt;ul data-bind="foreach: fruits"andgt; andlt;li data-bind="text: $data"andgt;andlt;/liandgt; andlt;/ulandgt; $data refers to the current item in the array. This will render: Using Objects in Arrays this.fruits = ko.observableArray([ { name: "Apple", color: "Red" }, { name: "Banana", color: "Yellow" } ]); HTML: andlt;ul data-bind="foreach: fruits"andgt; andlt;liandgt; andlt;strong data-bind="text: name"andgt;andlt;/strongandgt; - andlt;span data-bind="text: color"andgt;andlt;/spanandgt; andlt;/liandgt; andlt;/ulandgt; Advanced: Track Index and Parent Inside a foreach, Knockout gives you special variables: Variable Description $data The current item $index The index of the current item $parent The parent context (outside the loop) $root The root context (top-level VM) andlt;ul data-bind="foreach: fruits"andgt; andlt;liandgt; #andlt;span data-bind="text: $index"andgt;andlt;/spanandgt; andlt;span data-bind="text: name"andgt;andlt;/spanandgt; andlt;/liandgt; andlt;/ulandgt; Dynamic Updates (Magic!) this.addFruit = () =andgt; { this.fruits.push({ name: "Grapes", color: "Purple" }); }; this.removeLast = () =andgt; { this.fruits.pop(); }; And in your HTML: andlt;button data-bind="click: addFruit"andgt;Add Fruitandlt;/buttonandgt; andlt;button data-bind="click: removeLast"andgt;Remove Lastandlt;/buttonandgt; The list will update automatically — no DOM work required! Summary Feature What it does foreach Loops through an observable array $data Current item $index Index of current item Dynamic updates Array changes auto-update the DOM Works with arrays of objects Great for tables, cards, lists, etc. Want an example using foreach to render a to-do list, shopping cart, or editable table? Just say the word and I’ll mock one up for you! andlt;liandgt;Appleandlt;/liandgt; andlt;liandgt;Bananaandlt;/liandgt; andlt;liandgt;Cherryandlt;/liandgt;

What is foreach? – MindStick

What is foreach?

The foreach binding is one of the most commonly used features in Knockout.js — it lets you dynamically render lists of items, and keeps the DOM in sync as the list changes.

Let’s break it down nice and easy

foreach is a Knockout.js binding that:
Loops through an observable array
Repeats an HTML template for each item

Automatically updates the DOM when the array changes (add/remove/update)

Basic Example

ViewModel:

function ViewModel() {
  this.fruits = ko.observableArray(["Apple", "Banana", "Cherry"]);
}
ko.applyBindings(new ViewModel());

HTML:

<ul data-bind="foreach: fruits">
  <li data-bind="text: $data"></li>
</ul>

$data refers to the current item in the array.

This will render:

Using Objects in Arrays

this.fruits = ko.observableArray([
  { name: "Apple", color: "Red" },
  { name: "Banana", color: "Yellow" }
]);

HTML:

<ul data-bind="foreach: fruits">
  <li>
    <strong data-bind="text: name"></strong> - 
    <span data-bind="text: color"></span>
  </li>
</ul>

Advanced: Track Index & Parent

Inside a foreach, Knockout gives you special variables:

Variable	Description
`$data`	The current item
`$index`	The index of the current item
`$parent`	The parent context (outside the loop)
`$root`	The root context (top-level VM)

<ul data-bind="foreach: fruits">
  <li>
    #<span data-bind="text: $index"></span> 
    <span data-bind="text: name"></span>
  </li>
</ul>

Dynamic Updates (Magic!)

this.addFruit = () => {
  this.fruits.push({ name: "Grapes", color: "Purple" });
};

this.removeLast = () => {
  this.fruits.pop();
};

And in your HTML:

<button data-bind="click: addFruit">Add Fruit</button>
<button data-bind="click: removeLast">Remove Last</button>

The list will update automatically — no DOM work required!

Summary

Feature	What it does
`foreach`	Loops through an observable array
`$data`	Current item
`$index`	Index of current item
Dynamic updates	Array changes auto-update the DOM
Works with arrays of objects	Great for tables, cards, lists, etc.

Want an example using foreach to render a to-do list, shopping cart, or editable table? Just say the word and I’ll mock one up for you!

<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>

interview

What is foreach?

ICSM Computer

Can you answer this question?

1 Answers

Basic Example

ViewModel:

HTML:

Using Objects in Arrays

HTML:

Advanced: Track Index & Parent

Dynamic Updates (Magic!)

Summary

Liked By